<template>
  <img
    :src="captchaSrc"
    :width="width"
    :height="height"
    ref="captchaImg"
    @click="changeCaptcha()"
    alt
  />
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import api from "@/http/api";

const props = defineProps({
  node: Object,
  compStyle: Object
});
const captchaSrc = ref('');
const width = ref('');
const height = ref('');

const init = () => {
  const compStyle = props.compStyle || {};
  width.value = compStyle['width'];
  height.value = compStyle['height'];
};

const changeCaptcha = () => {
  api.captcha().then(res => {
    captchaSrc.value = URL.createObjectURL(new Blob([res.data]));
  });
};

watch(() => props.compStyle, () => {
  init();
}, {deep: true});

onMounted(() => {
  init();
  changeCaptcha();
});
</script>